<template>
    <el-dropdown trigger="click" ref="operatorDropdown">
        <el-button type="text" icon="el-icon-setting" class="buttonFilter"></el-button>
        <el-dropdown-menu slot="dropdown" v-if="columns && defaultSelect">
            <el-tree
                ref="treeCheckbox"
                :data="columns"
                node-key="prop"
                show-checkbox
                :draggable="false"
                @node-drop="handleDrop"
                @check="check"
                :allow-drop="allowDrop" :allow-drag="allowDrag" :default-checked-keys="defaultSelect" class="treeFilter" :props="defaultProps">
            </el-tree>
            <div style="text-align:center">
                <pro-action type="primary" size="small" command="smallCommand112" @handler="onFilterColumns">确定</pro-action>
                <pro-action size="small" command="smallCommand112" @handler="onFilterCancel">取消</pro-action>
            </div>
        </el-dropdown-menu>
    </el-dropdown> 
</template>
<script>
    export default {
        componentName:'filterColumns',
        props:{
            tableRef:{
                type:String,
                default:''
            }
        },
        data(){
            return {
                defaultSelect:null,
                columns:null,
                parentNode:this.$parent,
                defaultProps: {
                    label: 'label'
                }
            }
        },
        methods:{
            onFilterColumns(){
                this.$refs.operatorDropdown.hide();
                let newSelect = this.$refs.treeCheckbox.getCheckedKeys().concat(this.$refs.treeCheckbox.getHalfCheckedKeys())
                this.defaultSelect = newSelect
                let newColumns = this.columns.filter(item => {
                    return newSelect.indexOf(item.prop) != -1
                })
                this.parentNode.$refs[this.tableRef].handleFilterColumns(newColumns)
            },
            onFilterCancel(){
                this.$refs.operatorDropdown.hide();
            },
            allowDrop(draggingNode, dropNode, type){
                if(dropNode.data.label == '操作' || dropNode.data.label == '序号'){
                    return false
                }else{
                    // 只允许同级拖拽，不允许改变原来的目录结构
                    if(type === 'inner'){
                        return false
                    }else{
                        return true
                    }
                }
            },
            allowDrag(draggingNode){
                let canDrag = true
                if(draggingNode.data.label.indexOf('操作') != -1 || draggingNode.data.label.indexOf('序号') != -1){
                    canDrag = false
                }
                return canDrag
            },
            check(data, checkNodes) {
                //点击的时候获取选中的节点，更改defaultSelect
                this.defaultSelect = checkNodes.checkedKeys //选中的节点
            },
            //change事件是在checkbox改变之后都会触发
            handleDrop(draggingNode, dropNode, dropType, ev) {
                // 拖拽之后会改变选中，再次默认选中
                this.setCheckedKey(draggingNode);
            },
            //自定义选中方法
            setCheckedKey(draggingNode) {
                // 确保数据渲染到tree之后再做checked
                this.$nextTick(()=>{
                    // console.log(this.defaultSelect)
                    this.$refs.treeCheckbox.setCheckedKeys(this.defaultSelect);
                });
            },
        },
        computed: {
            newcolumns() {
                return this.columns;
            }
        },
        mounted(){
            this.columns = this.$parent.$refs[this.tableRef].columns || []
            this.defaultSelect = (this.columns || []).map(item => {
                if(item.hide){
                    return null
                }else{
                    return item.prop
                }
            })
        }
    }
</script>
<style lang="scss" scoped>
.checkbox-item{
    padding: 5px 12px;
}
.buttonFilter{
    padding: 6px;
    margin:0;
    /deep/ i[class^="el-icon-"]{
        font-size: 20px;
        margin-left:3px;
    }
}
.treeFilter{
    padding: 3px 6px;
    /deep/ .is-leaf{
        display: none;
    }
}
</style>